<html>

<head>
<style>
body {
  width:360px;
  height: 400px;
}

#videoList{
  height: 340px;
  overflow: auto;
}

#addVideoTitle{
  width: 200px;
}

#addVideoButton{
  width: 50px;
  height: 25px;
}

</style>

<script type="text/javascript" src="/js/AddVideoWidget.js"></script>
<script type="text/javascript" src="/js/VideoList.js"></script>
<script type="text/javascript" src="/js/VideoListRow.js"></script>
<script type="text/javascript">

var watchListDao = chrome.extension.getBackgroundPage();
var addVideoWidget = new AddVideoWidget();
var videoList = new VideoList();

function init(){
	watchListDao.init();
	addVideoWidget.init();
	videoList.init();
}

function deleteVideo(id){
	videoList.deleteVideo(id);
	refresh();
}

function openVideoInNewTab(id){
	videoList.openVideoInNewTab(id);
	refresh();
}

function refresh(){
	window.location.reload();
}

</script>

</head>

<body onload="init();">

<div id="addVideo">
Add to my WatchList:<br/>
<input type="text" id="addVideoTitle" /> 
<input type="hidden" id="addVideoUrl" /> 
<input id="addVideoButton" type="submit" value="Add" onclick="addVideoWidget.addVideo();" />	
</div>

<hr/>

<div id="videoList">
</div>

</body>

</html>